<template>
    <div>
      <div class="clearfix">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#2a2d2f"
          text-color="#fff"
          active-text-color="#ffd04b"
          style="border-bottom: none;display: inline-block;float: left">
          <el-menu-item index="1">项目进度报表</el-menu-item>
        </el-menu>
      </div>
      <div>
        <div style="background-color: #fff;margin:20px;text-align: center;" class="clearfix">
        <div style="float: left;width: 16%;margin-top:30px;">
          <p>项目</p>
          <p style="font-size: 24px">{{projectAll}}</p>
        </div>
          <div style="float: left;width: 16%;margin-top:30px;">
            <p>总任务</p>
            <p style="font-size: 24px">{{missionAll}}</p>
          </div>
          <div style="float: left;width: 16%;margin-top:30px;">
            <p>未开始</p>
            <p style="font-size: 24px;">{{missionNoStart}}</p>
          </div>
          <div style="float: left;width: 16%;margin-top:30px;">
            <p>进行中</p>
            <p style="font-size: 24px;color:#b3b51e">{{missionDoing}}</p>
          </div>
          <div style="float: left;width: 16%;margin-top:30px;">
            <p>已完成</p>
            <p style="font-size: 24px;color:green;">{{CompleteMission}}</p>
          </div>
          <div style="float: left;width:16%; margin:10px 0;">
            <el-progress type="dashboard" :percentage="missionComplete" :color="missionCompleteColors"></el-progress>
            <div>完成率</div>
          </div>
        </div>
        <div style="background-color: white; margin: 20px;padding:20px;height: 500px;">
          <el-table
            :data="projectData"
            style="width: 100%;cursor: pointer"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            @row-click="toProject">
            <el-table-column
              prop="project_name"
              label="项目"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="state"
              label="项目状态"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="missionnum"
              label="总任务"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="notstartmissionnum"
              label="未开始"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="startmissionnum"
              label="进行中"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="finishmissionnum"
              label="已完成"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="complete"
              label="完成率"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <el-progress :percentage="scope.row.completeness" :color="customColors"></el-progress>
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align: center;margin-top: 10px;">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 6, 7, 8]"
              :page-size="PageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="Total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    const axios = require('axios');
    export default {
        name: "projectData",
      data() {
          return {
            activeIndex: '1',
            currentPage: 1,
            PageSize: 5,
            Total:0,
            projectAll: 0,
            missionAll: 0,
            missionNoStart: 0,
            missionDoing: 0,
            CompleteMission: 0,
            missionComplete: 0,
            missionPostpone: 40,
            missionCompleteColors: [
              {color: '#f56c6c', percentage: 20},
              {color: '#e6a23c', percentage: 40},
              {color: '#5cb87a', percentage: 60},
              {color: '#1989fa', percentage: 80},
              {color: '#6f7ad3', percentage: 100}
            ],
            customColors: [
              {color: '#f56c6c', percentage: 20},
              {color: '#e6a23c', percentage: 40},
              {color: '#5cb87a', percentage: 60},
              {color: '#1989fa', percentage: 80},
              {color: '#6f7ad3', percentage: 100}
            ],
            projectData: [],
            postponeData:[],
            totalData:[],
          }
      },
      created(){
        this.$axios.all([
          axios.post("/getReportPageResult",{"id":window.localStorage.getItem("id")}),
        ]).then(this.$axios.spread((res1) => {
          // console.log(res1);
          this.projectAll = res1.data.projectnum;
          this.missionAll = res1.data.missionnum;
          this.missionNoStart = res1.data.notstartmissionnum;
          this.missionDoing = res1.data.startmissionnum;
          this.CompleteMission = res1.data.finishmissionnum;
          this.missionComplete = res1.data.completeness;
          this.totalData = res1.data.projectList;
          this.projectData = this.totalData.slice(0,this.PageSize);
          this.Total = res1.data.projectList.length;
        }))
      },
      methods: {
        handleSizeChange(val) {
          this.PageSize = val;
          this.projectData = this.totalData.slice(0,this.PageSize);
        },
        handleCurrentChange(val) {
          this.currentPage = val;
          this.projectData = this.totalData.slice((this.currentPage-1) * this.PageSize,this.currentPage * this.PageSize);
        },
        toProject(row){
          this.$router.push('/user/projects/projectDetail/overview/'+ row.id);
        }
      }
    }
</script>

<style scoped>

</style>
